import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
    WingBlank,
    WhiteSpace,
    Card
} from 'antd-mobile'
import {withRouter} from 'react-router-dom'
import QueueAnim from 'rc-queue-anim'
import './index.less'


const Header = Card.Header
const Body = Card.Body
class UserList extends Component{
    static propTypes = {
        userList:PropTypes.array.isRequired
    }

    render() {
        const { userList } = this.props
        // console.log(userList)
        return(
            <WingBlank size="lg" style={{marginBottom:60, marginTop:50}}>
                <QueueAnim type='scale'>
                    {
                        userList.length > 0?userList.map(user=>

                            <div className='user-list' key={ user._id }>
                                <WhiteSpace/>
                                <Card
                                    onClick={()=>this.props.history.push(`/chat/${ user._id }`)}
                                >
                                    <Header
                                        className='card-header'
                                        thumb={ user.header?require(`../../assets/avatars/${user.header}.png`).default:null}
                                        extra={user.username}
                                    />
                                    <Body>
                                    <div>职位: { user.post }</div>
                                    { user.company ? <div>公司: { user.company}</div> : null}
                                    { user.salary ? <div>月薪: { user.salary }</div> : null}
                                    <div>描述: { user.info }</div>
                                    </Body>
                                </Card>
                            </div>
                        ):null
                    }
                </QueueAnim>

            </WingBlank>
        )
    }
}
export default withRouter(UserList)